<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 夏栀来信</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        .profile-container {
            max-width: 1000px;
            margin: 30px auto;
            padding: 20px;
            display: flex;
            gap: 30px;
        }
        .profile-form {
            flex: 2;
            background: #f9f9f9;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        .form-row {
            display: flex;
            gap: 15px;
        }
        .form-row .form-group {
            flex: 1;
        }
        .btn-save {
            background-color: #27ae60;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .btn-save:hover {
            background-color: #2ecc71;
        }
        .avatar-container {
            text-align: center;
            margin-bottom: 20px;
        }
        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .avatar-upload {
            display: none;
        }
        .avatar-label {
            display: inline-block;
            margin-top: 10px;
            color: #3498db;
            cursor: pointer;
        }
        .user-panel {
            flex: 1;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            height: fit-content;
        }
        .user-menu {
            list-style: none;
            padding: 0;
        }
        .user-menu li {
            margin-bottom: 10px;
        }
        .user-menu a {
            display: block;
            padding: 10px;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        .user-menu a:hover {
            background-color: #f0f0f0;
        }
        .user-menu a.active {
            background-color: #e0f7fa;
            color: #007bff;
        }
    </style>
</head>
<body>
    <header>
        <!-- 与首页相同的header部分 -->
        <div class="top-bar">
            <span>学号: 23215220329 姓名: 牟其鑫</span>
            <div class="user-actions">
                <a href="login.html">登录</a> | <a href="register.html">注册</a>
                | <a href="profile.html" class="user-center">个人中心</a>
            </div>
        </div>
        <div class="main-header">
            <div class="logo">夏栀来信</div>
            <div class="search-box">
                <form id="search-form" action="product.html" method="get">
                    <input type="text" name="name" placeholder="搜索商品名称..." required>
                    <button type="submit">搜索</button>
                </form>
            </div>
            <div class="cart-icon">
                <a href="cart.html">购物车(<span id="cart-count">0</span>)</a>
            </div>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="#">热门推荐</a></li>
                <li><a href="#">节日限定</a></li>
                <li><a href="#">园艺工具</a></li>
                <li><a href="#">养护指南</a></li>
                <li><a href="#">常见问题</a></li>
            </ul>
        </nav>
    </header>

    <main class="profile-container">
        <section class="profile-form">
            <h2>个人资料</h2>
            <form id="profile-form">
                <div class="avatar-container">
                    <img src="images/default-avatar.jpg" alt="头像" class="avatar" id="user-avatar">
                    <input type="file" id="avatar-upload" class="avatar-upload" accept="image/*">
                    <label for="avatar-upload" class="avatar-label">更换头像</label>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="student-id">密码</label>
                        <input type="text" id="student-id" class="form-control" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" class="form-control" required>
                </div>
                
                <div class="form-group">
                    <label for="phone">手机号码</label>
                    <input type="tel" id="phone" class="form-control" required>
                </div>
                
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select id="gender" class="form-control">
                        <option value="male">男</option>
                        <option value="female">女</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="birthday">出生日期</label>
                    <input type="date" id="birthday" class="form-control">
                </div>
                
                <button type="submit" class="btn-save">保存资料</button>
            </form>
        </section>
        
        <section class="user-panel">
            <h3>个人中心</h3>
            <ul class="user-menu">
                <li><a href="profile.html" class="active">个人资料</a></li>
                <li><a href="orders.html">我的订单</a></li>
                <li><a href="address.html">收货地址</a></li>
                <li><a href="login.html">退出登录</a></li>
            </ul>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>© 2023 夏栀来信网上购物商城 版权所有</p>
            <p>地址：某某省某某市某某区某某路123号</p>
            <p>联系电话：123-45678901</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 从本地存储加载用户数据
            let user = JSON.parse(localStorage.getItem('user')) || {
                username: '张三',
                studentId: '123456',
                email: '',
                phone: '',
                gender: 'male',
                birthday: '',
                avatar: 'images/default-avatar.jpg'
            };
            
            // 初始化表单数据
            document.getElementById('username').value = user.username;
            document.getElementById('student-id').value = user.studentId;
            document.getElementById('email').value = user.email;
            document.getElementById('phone').value = user.phone;
            document.getElementById('gender').value = user.gender;
            document.getElementById('birthday').value = user.birthday;
            document.getElementById('user-avatar').src = user.avatar;
            
            // 头像上传功能
            document.getElementById('avatar-upload').addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(event) {
                        document.getElementById('user-avatar').src = event.target.result;
                        user.avatar = event.target.result;
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // 表单提交
            document.getElementById('profile-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 更新用户数据
                user = {
                    username: document.getElementById('username').value,
                    studentId: document.getElementById('student-id').value,
                    email: document.getElementById('email').value,
                    phone: document.getElementById('phone').value,
                    gender: document.getElementById('gender').value,
                    birthday: document.getElementById('birthday').value,
                    avatar: user.avatar // 保留已上传的头像
                };
                
                // 保存到本地存储
                localStorage.setItem('user', JSON.stringify(user));
                
                // 更新顶部显示
                document.querySelector('.top-bar span').textContent = `学号: ${user.studentId} 姓名: ${user.username}`;
                
                alert('个人资料已保存！');
            });
            
            // 更新购物车数量
            function updateCartCount() {
                const cart = JSON.parse(localStorage.getItem('cart')) || [];
                const count = cart.reduce((total, item) => total + item.quantity, 0);
                document.getElementById('cart-count').textContent = count;
            }
            updateCartCount();
        });
    </script>
</body>
</html>